<template>
  <div>
  	<div class="search">
	    <input v-model="keyword" class="search-input" placeholder="输入城市名或拼音" />
	  </div>
	  <div class="search-content" ref="search" v-show="keyword">
	  	<ul>
	  		<li class="search-item" v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
	  		<li class="search-item" v-show="hasNoData">没有找到匹配数据</li>
	  	</ul>
	  </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
  	cities: Object
  },
  data () {
  	return {
  		keyword: '',
  		list: [],
  		timer: null
  	}
  },
  methods: {
  	handleCityClick (city) {
  		this.$store.commit('changeCity', city)
  		this.$router.push('/')
  		this.keyword = ''
  	}
  },
  computed: {
  	hasNoData () {/*没有找到匹配数据*/
  		return !this.list.length
  	}
  },
  watch: {
  	keyword () {
  		/*start*/
  			const result = []
  			for (let i in this.cities) {
  				this.cities[i].forEach((value) => {
  					if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1 ) { /*意思是如果在spell或者name中能搜到关键词就添加到结果中*/
  						result.push(value)
  					}
  				})
  			}
  			this.list = result
  			/*end*/
  	}
  },
  mounted () {/*定义一个生命周期函数*/
  	this.scroll = new BScroll(this.$refs.search)
  }
}
</script>

<style lang="stylus" scoped="">
@import '~styles/varibles.styl'
.search
  height: .72rem
  padding: 0 .1rem
  background:$bgColor
  .search-input
    width:100%
    height: .63rem
    line-height: .63rem
    text-align:center
    border-radius: .06rem
    color:#666
    padding:0 .1rem
    box-sizing:border-box
.search-content
  position:absolute
  overflow: hidden
  top: 1.58rem
  bottom:0
  left:0
  right:0
  z-index:1
  background:#eee
  .search-item
  	line-height: .70rem
  	padding-left: .2rem
  	color: #666
  	border-bottom:solid 1px #eee
  	background: #fff
</style>